<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-form-item label="模板名称" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入模板名称"/>
        </n-form-item>
    </n-form>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import type {FormInst, FormRules} from 'naive-ui'
import {Rules} from '@/utils'
import {JBoltApi} from '@/utils/request'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import {storeToRefs} from "pinia";
import {usePrintStore} from "@/store/modules/print";


const { info,hiprintTemplate } = storeToRefs(usePrintStore())

/** 表单相关 start */
const formRef = ref<FormInst | null>()

interface PostType {
    id: string
    sn: string
    name: string
    content: any,
    remark: string
    testJsonData: string,
    testApiUrl: string
}

const rules: FormRules = {
    name: new Rules().required('请输入模板名称').value,
}

const form = useResetableData<PostType>({
    id: '',
    sn: '',
    name: '',
    remark:'',
    content: {
    },
    testApiUrl:'',
    testJsonData:''
})

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = '/api/admin/hiprint/tpl/submit'
    await JBoltApi.tryPost(url, form).then((res)=>{
        info.value=res.data
    })
    return true
}


onMounted(() => {
    if(info.value){
        form.id = info.value.id
        form.name = info.value.name
        form.sn = info.value.sn
        form.remark = info.value.remark
        form.testApiUrl = info.value.testApiUrl
        form.testJsonData = info.value.testJsonData
    }
    form.content = JSON.stringify(hiprintTemplate.value.getJson())
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
